<template>
  <ElCascader :="$attrs" v-model="value" :options="arraData"></ElCascader>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElCascader } from 'element-plus'
import data from './data.js'

interface Props {
  modelValue: string;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: ''
})

const emit = defineEmits<{
  'update:model-value': [string]
}>()

const arraData = computed(() => {
  return data.map(item => {
    const child = item.city || []
    const children = child.map(i => {
      return { label: `${i.name}`, value: `${i.name}` }
    })
    return { label: item.name, value: item.name, children }
  })
})

const value = computed<any>({
  get() {
    return props.modelValue ? props.modelValue.split('-') : []
  },
  set(val) {
    const v = val || []
    emit('update:model-value', v.join('-'))
  }
})

</script>
